<template>
    <div class="bg">
        <div class="box">

            <div class="left-box">
                <div class="left-top-log">
                    <router-link to="/"><img src="https://admin.hqx.com.cn/Public/App/image/web-logo.png" alt="">
                    </router-link>
                    <div class="introduce">
                        <p>13年旅行定制经验</p>
                        <p>深圳市旅游协会会员单位</p>
                        <p>旅游部批准出境许可旅行社</p>
                        <p>ISO9001国际质量认证企业</p>
                    </div>
                </div>

                <div class="left-top-title">
                    <div class="company-name">环球行国际旅行社</div>
                    <div class="company-name-border"></div>
                    <p class="company-introduce">主营环球旅行、公司团建、私人定制、研学亲子、海岛度假、 旅游签证等</p>
                    <div>热线:0755-88866663</div>
                    <div>24H手机:13925205838</div>
                    <div>粤ICP备15014963号2</div>
                </div>
            </div>

            <div class="form-login">
                <img src="https://admin.hqx.com.cn/Public/App/image/bg-img2.png" alt="" class="form-bg-img">
                <div class="name">手机号登录</div>
                <input @blur="handleBlur" v-model="phone" type="text" placeholder="请输入手机号" class="ipt" />
                <div class="ipt-code-box">
                    <input v-model="code" type="text" placeholder="验证码" class="ipt2" />
                    <div :class="countDownFlag ? 'send-code no-drop' : 'send-code'" @click="sendCodeBtn">
                        {{ countDown }}
                    </div>
                </div>
                <div class="form-tip">{{ tipText }}</div>

                <n-button @click="sendLogin" type="info" round class="login-btn">登录</n-button>

                <div style="display: flex; align-items: center; height: 20px;">
                    <div v-if="!agreement" class="agreement-false" @click="agreementChange(true)">

                    </div>
                    <div v-else class="agreement-true" @click="agreementChange(false)">
                        <span class="iconfont icon-duihao" style="font-size: 10px; font-weight: bold;"></span>
                    </div>
                    <span class="agreement-text">阅读并同意环球行的
                        <router-link to="/" target="_blank">服务协议</router-link>
                        和
                        <router-link to="/" target="_blank">个人信息保护政策</router-link>
                    </span>

                </div>
            </div>

            <div class="bg-img"><img src="https://admin.hqx.com.cn/Public/App/image/bg-img1.png" alt=""></div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";

import { sendCode, login, other_demand_add } from "@/api/travel";
import { useRouter, useRoute } from 'vue-router';
import { useCounterStore } from "@/stores/counter";

const counterStore = useCounterStore();
const router = useRouter();
const route = useRoute();
let phone = ref('');
let code = ref('');
let codeFlag = ref(false);
let countDown = ref('获取验证码');
let countDownFlag = ref(false);
let tipText = ref('')
let agreement = ref(false);
let pass = ref("")



// 手机号验证
const handleBlur = () => {
    if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(phone.value)) {
        tipText.value = "请输入正确的手机号码"
        return;
    } else {
        tipText.value = "";
    }
}

// 发送验证码
const sendCodeBtn = async () => {

    if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(phone.value)) {
        tipText.value = "请输入正确的手机号码"
        return;
    } else {
        tipText.value = "";
    }

    if (countDownFlag.value) {
        return;
    }

    countDownFlag.value = true;
    codeFlag.value = true;
    // 开启倒计时
    let tiem = 59;
    countDown.value = tiem + "s";
    // 手机号码正确 开启倒计时
    let timer = setInterval(() => {
        tiem--;
        countDown.value = tiem + 's';
        if (tiem === 0) {
            countDown.value = "重发验证码";
            countDownFlag.value = false;
            clearInterval(timer);
        }
    }, 1000)

    // 发送起请求
    let res = await sendCode({
        phone: phone.value, //手机号
        template: 'SMS_463935593', //短信模板
        sign: '国旅环球行', //签名
    })
    pass.value = res.data;
}



const sendLogin = async () => {
    // 判断是否输入正确手机号
    const rule = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
    if (!rule.test(phone.value)) {
        tipText.value = "请输入正确的手机号码"
        return;
    }
    // 判断是否输入验证码
    if (!code.value) {
        tipText.value = "请输入验证码";
        return;
    }
    // 协议
    if (!agreement.value) {
        tipText.value = "请先阅读并同意相关协议和政策";
        return;
    }
    // 判断是否请求过验证码
    if (!codeFlag.value) {
        tipText.value = "验证码已失效,请重新获取";
        return;
    }

    // 登录
    let res = await login({
        phone: phone.value,
        code: code.value,
        pass: pass.value,
    })
    if (res.status == -1) {
        tipText.value = "验证码错误，请重新输入";
        return;
    }

    // 发送用户手机号到表单
    let sendPhone = await other_demand_add({
        type: '用户登录',
        tel: phone.value,
        token: res.data,
    })



    // 保存token到缓存
    localStorage.setItem('token', res.data)
    // 保存phone到缓存
    localStorage.setItem('phone', phone.value)

    // 获取用户信息保存到pinia
    await counterStore.getUserDetails();

    // 验证成功,返回之前页面
    // router.back();
    window.location.href = route.query.linkBackUrl;
}


// 协议
const agreementChange = (flag) => {
    agreement.value = flag;
    if (flag && tipText.value == "请先阅读并同意相关协议和政策") {
        tipText.value = "";
    }
}


onMounted(() => {
    console.log(route.query.linkBackUrl)
});












</script>

<style lang="scss" scoped>
.bg {
    // background: linear-gradient(94deg, #215FFF 0%, #0033E8 100%);
    // min-width: 1920px;
    width: 100vw;
    // min-width: 1200px;

}

.box {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    // width: 1920px;
    // min-width: 1920px;
    width: 100vw;
    height: 100vh;
    background: #003DFF;
}

.bg-img {
    width: 100vw;
    position: fixed;
    bottom: 0;
    z-index: -1;

    &>img {
        width: 100%;
    }
}

.left-box {
    float: left;
    // padding: 50px 0 0 150px;
    padding: 2vW 0 0 7vw;

}

.left-top-log {
    width: 300px;
    color: #fff;

    a>img {
        // width: 200px;
        width: 10vw;
        margin-bottom: 20px;
    }

    .introduce {
        // width: 300px;
        width: 16vw;
        font-size: 16px;
        font-weight: 500;
        line-height: 28px;
        font-family: PingFang SC, PingFang SC;
        color: #FFFFFF;
    }
}

.left-top-title {
    color: #fff;
    margin-top: 10VW;

    .company-name {
        height: 76px;
        // font-family: STSong;
        // font-family: SimSun;
        font-weight: bold;
        font-size: 38px;
        color: #FFFFFF;
        line-height: 66px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .company-name-border {
        width: 30px;
        height: 4px;
        border-radius: 4px;
        // border: 2px solid rgba(255, 255, 255, 0.8);
        background-color: rgba(255, 255, 255, 0.8);
        margin-bottom: 10px;
    }

    .company-introduce {
        width: 300px;
        height: 44px;
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 50px;

    }

    .company-contact {
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
    }
}



// @media (min-width: 1300px) {
//     .company-introduce {
//         color: red !important;
//         margin-bottom: 20px !important;

//     }
// }
// ----------------------------------------------------
.form-login {
    float: right;
    position: relative;
    // width: 500px;
    width: 30vw;
    max-width: 500px;
    min-width: 324px;
    // height: 400px;
    // height: 30VW;
    min-height: 340px;
    // height: 400px;
    background: #F3F6FF;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 24px 24px 24px 24px;
    // padding: 60px;
    padding: 3vw;
    margin-right: 11vw;
    margin-top: 8vw;
    box-sizing: border-box;

    .form-bg-img {
        width: 24vw;
        position: absolute;
        z-index: -1;
        top: -28%;
        right: -20%;
    }

    .name {
        // width: 140px;
        font-weight: bold;
        font-size: 26px;
        // font-size: 300%;
        color: #003DFF;
        // line-height: 30px;
        font-family: PingFang SC, PingFang SC;
        padding-bottom: 10px;
        // border-bottom: 2px solid #003DFF;
    }

    .ipt {
        // width: 380px;
        width: 24vw;
        max-width: 380px;
        min-width: 270px;
        height: 40px;
        // height: 2vw;
        background: #E7EDFF;
        border-radius: 6px 6px 6px 6px;
        border: 1px solid #B7C7FF;
        margin: 1vw 0;
        // margin-bottom: 1vw;
        padding: 4px 16px;
        box-sizing: border-box;
    }

    .ipt-code-box {
        // display: flex;
        position: relative;
    }

    .ipt2 {
        width: 24vw;
        max-width: 380px;
        min-width: 270px;
        height: 40px;
        background: #E7EDFF;
        border-radius: 6px 6px 6px 6px;
        border: 1px solid #B7C7FF;
        padding: 4px 140px 4px 16px;
        box-sizing: border-box;
    }

    .send-code {
        position: absolute;
        top: 25%;
        right: 16px;
        width: 80px;
        height: 40px;
        // line-height: 40px;
        text-align: right;
        color: #3882e5;
        cursor: pointer;
    }

    .no-drop {
        cursor: no-drop;
    }

    .form-tip {
        font-size: 12px;
        color: red;
        height: 16px;
        padding-left: 18px;
    }

    .login-btn {

        width: 24vw;
        max-width: 380px;
        min-width: 270px;
        height: 50px;

        background: linear-gradient(90deg, #1650FF 0%, #5C16FF 100%);
        margin: 1vw 0 1vw;
    }
}

.agreement-text {
    font-weight: 400;
    font-size: 12px;
    color: #999999;
    padding-left: 6px;

    &>a {
        color: #194EFF;
    }
}

.agreement-false {
    width: 14px;
    height: 14px;
    border: 1px solid #999999;
    box-sizing: border-box;
}

.agreement-true {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: #fff;
    background: #2940ff;
}


// 屏幕小于1400
@media (max-width: 1400px) {
    .bg {
        // background: linear-gradient(94deg, #215FFF 0%, #0033E8 100%);
        // min-width: 1920px;
        width: 100vw;
        // min-width: 1200px;

    }

    .box {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        // width: 1920px;
        // min-width: 1920px;
        width: 100vw;
        height: 100vh;
        background: #003DFF;
    }

    .bg-img {
        width: 100vw;
        position: fixed;
        bottom: 0;
        z-index: -1;

        &>img {
            width: 100%;
        }
    }

    .left-box {
        float: left;
        // padding: 50px 0 0 150px;
        padding: 2vW 0 0 7vw;

    }

    .left-top-log {
        width: 300px;
        color: #fff;

        a>img {
            // width: 200px;
            width: 10vw;
            margin-bottom: 20px;
        }

        .introduce {
            // width: 300px;
            width: 16vw;
            font-size: 15px;
            font-weight: 500;
            line-height: 28px;
            font-family: PingFang SC, PingFang SC;
            color: #FFFFFF;
        }
    }

    .left-top-title {
        color: #fff;
        margin-top: 30px;

        .company-name {
            height: 76px;
            // font-family: STSong;
            // font-family: SimSun;
            font-weight: bold;
            font-size: 32px;
            color: #FFFFFF;
            line-height: 66px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .company-name-border {
            width: 30px;
            height: 4px;
            border-radius: 4px;
            // border: 2px solid rgba(255, 255, 255, 0.8);
            background-color: rgba(255, 255, 255, 0.8);
            margin-bottom: 10px;
        }

        .company-introduce {
            width: 260px;
            height: 44px;
            font-size: 15px;
            line-height: 24px;
            margin-bottom: 20px;

        }

        .company-contact {
            font-weight: 500;
            font-size: 14px;
            line-height: 22px;
        }
    }



    // @media (min-width: 1300px) {
    //     .company-introduce {
    //         color: red !important;
    //         margin-bottom: 20px !important;

    //     }
    // }
    // ----------------------------------------------------
    .form-login {
        float: right;
        position: relative;
        // width: 500px;
        width: 30vw;
        max-width: 500px;
        min-width: 324px;
        // height: 400px;
        // height: 30VW;
        min-height: 320px;
        // height: 400px;
        background: #F3F6FF;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
        border-radius: 24px 24px 24px 24px;
        // padding: 60px;
        padding: 3vw;
        margin-right: 11vw;
        margin-top: 8vw;
        box-sizing: border-box;

        .form-bg-img {
            width: 24vw;
            position: absolute;
            z-index: -1;
            top: -28%;
            right: -20%;
        }

        .name {
            // width: 140px;
            font-weight: bold;
            font-size: 22px;
            // font-size: 300%;
            color: #003DFF;
            // line-height: 30px;
            font-family: PingFang SC, PingFang SC;
            padding-bottom: 10px;
            // border-bottom: 2px solid #003DFF;
        }

        .ipt {
            // width: 380px;
            width: 24vw;
            max-width: 380px;
            min-width: 270px;
            height: 40px;
            // height: 2vw;
            background: #E7EDFF;
            border-radius: 6px 6px 6px 6px;
            border: 1px solid #B7C7FF;
            margin: 1vw 0;
            // margin-bottom: 1vw;
            padding: 4px 16px;
            box-sizing: border-box;
        }

        .ipt-code-box {
            // display: flex;
            position: relative;
        }

        .ipt2 {
            width: 24vw;
            max-width: 380px;
            min-width: 270px;
            height: 40px;
            background: #E7EDFF;
            border-radius: 6px 6px 6px 6px;
            border: 1px solid #B7C7FF;
            padding: 4px 140px 4px 16px;
            box-sizing: border-box;
        }

        .send-code {
            position: absolute;
            top: 25%;
            right: 16px;
            width: 80px;
            height: 40px;
            // line-height: 40px;
            text-align: right;
            color: #3882e5;
            cursor: pointer;
        }

        .no-drop {
            cursor: no-drop;
        }

        .form-tip {
            font-size: 12px;
            color: red;
            height: 16px;
            padding-left: 18px;
        }

        .login-btn {

            width: 24vw;
            max-width: 380px;
            min-width: 270px;
            height: 50px;

            background: linear-gradient(90deg, #1650FF 0%, #5C16FF 100%);
            margin: 1vw 0 1vw;
        }
    }

    .agreement-text {
        font-weight: 400;
        font-size: 12px;
        color: #999999;
        padding-left: 6px;

        &>a {
            color: #194EFF;
        }
    }

    .agreement-false {
        width: 14px;
        height: 14px;
        border: 1px solid #999999;
        box-sizing: border-box;
    }

    .agreement-true {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        color: #fff;
        background: #2940ff;
    }


}
</style>